<template>
  <div id="user-register" style="height: 80vh">
    <el-row style="height: 100%;">
      <el-col :xs="24" :md="4" style="font-size: 20px;height: 100%;">
        <el-steps :active="active" direction="vertical">
          <el-step title="步骤一" :icon="Edit" description="验证手机号信息" />
          <el-step title="步骤二" :icon="Upload" description="收集用户个人信息" />
          <el-step title="步骤三" :icon="Picture" description="确认信息" />
        </el-steps>
      </el-col>
      <el-col :xs="24" :md="20" style="height: 100%;">
        <el-row style="height: 100%;">
          <router-view></router-view>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { Upload } from '@element-plus/icons-vue'
import { Picture } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const active = ref(0)
const stepToRouteName = ['register1', 'register2', 'register3']
const route = useRoute()
watch(
  () => route.name,
  (name) => {
    console.log(name);
    console.log(active.value);
    if (typeof name === 'string') {
      const index = stepToRouteName.indexOf(name)
      if (index !== -1) {
        active.value = index + 1
        console.log('现在的active值是:' + active.value);
      }
    }
  },
  {
    immediate: true
  }
)

// const active = ref(0)

// const next = () => {
//   if (active.value++ > 2) active.value = 0
//   router.push({
//     path: steps[active.value].route
//   })
// }

// const last = () => {
//   if (active.value-- < 1) active.value = 0
//   router.push({
//     path: steps[active.value].route
//   })
// }

</script>

<style>
#user-register {
  width: 85%;
  margin: 30px auto;
}
</style>
